@import '../../styles/variables';

.video-editor {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

  .editor-header {
    background: @white;
    border-bottom: 1px solid @border-color;
    padding: @spacing-lg;
    position: relative;
    z-index: 10;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1600px;
      margin: 0 auto;

      .header-info {
        h1 {
          font-size: @font-size-2xl;
          font-weight: 700;
          color: @gray-900;
          margin: 0;
          background: linear-gradient(135deg, @gray-900, @gray-700);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        p {
          font-size: @font-size-sm;
          color: @gray-600;
          margin: @spacing-xs 0 0 0;
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: @spacing-md;

        .import-btn {
          display: flex;
          align-items: center;
          gap: @spacing-xs;
          padding: @spacing-sm @spacing-md;
          background: @white;
          border: 2px solid @border-color;
          border-radius: @border-radius;
          color: @gray-700;
          font-size: @font-size-sm;
          font-weight: 500;
          cursor: pointer;
          transition: all @transition-fast;

          &:hover {
            border-color: @primary-color;
            color: @primary-color;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .export-btn {
          padding: @spacing-sm @spacing-md;
          background: @primary-color;
          border: none;
          border-radius: @border-radius;
          color: @white;
          font-size: @font-size-sm;
          font-weight: 500;
          cursor: pointer;
          transition: all @transition-fast;

          &:hover {
            background: @primary-color-dark;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
          }
        }
      }
    }
  }

  .editor-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;

    .left-panel {
      width: 280px;
      background: @white;
      border-right: 1px solid @border-color;
      padding: @spacing-lg;
      overflow-y: auto;

      .panel-section {
        margin-bottom: @spacing-xl;

        h3 {
          font-size: @font-size-base;
          font-weight: 600;
          color: @gray-900;
          margin-bottom: @spacing-md;
        }

        .effects-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: @spacing-sm;

          .effect-btn {
            aspect-ratio: 1;
            background: @gray-50;
            border: 1px solid @border-color;
            border-radius: @border-radius;
            cursor: pointer;
            transition: all @transition-fast;
            padding: @spacing-sm;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &:hover {
              background: @gray-100;
              transform: translateY(-2px);
              box-shadow: @shadow-sm;
            }

            .effect-icon {
              width: 32px;
              height: 32px;
              background: @primary-color;
              border-radius: @border-radius;
              margin-bottom: @spacing-xs;
            }

            .effect-name {
              font-size: @font-size-xs;
              color: @gray-700;
              text-align: center;
            }
          }
        }

        .transitions-list {
          display: flex;
          flex-direction: column;
          gap: @spacing-sm;

          .transition-btn {
            width: 100%;
            text-align: left;
            padding: @spacing-md;
            background: @gray-50;
            border: 1px solid @border-color;
            border-radius: @border-radius;
            cursor: pointer;
            transition: all @transition-fast;

            &:hover {
              background: @gray-100;
              border-color: @primary-color;
              color: @primary-color;
            }

            span {
              font-size: @font-size-sm;
              font-weight: 500;
              color: @gray-700;
            }
          }
        }

        .audio-tools {
          display: flex;
          flex-direction: column;
          gap: @spacing-sm;

          .audio-btn {
            width: 100%;
            text-align: left;
            padding: @spacing-md;
            background: @gray-50;
            border: 1px solid @border-color;
            border-radius: @border-radius;
            cursor: pointer;
            transition: all @transition-fast;

            &:hover {
              background: @gray-100;
              border-color: @primary-color;
              color: @primary-color;
            }

            span {
              font-size: @font-size-sm;
              font-weight: 500;
              color: @gray-700;
            }
          }
        }
      }
    }

    .center-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: @gray-50;

      .preview-container {
        flex: 1;
        position: relative;
        background: @gray-900;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .timeline-container {
        height: 240px;
        border-top: 1px solid @border-color;
        background: @white;
      }
    }

    .right-panel {
      width: 280px;
      background: @white;
      border-left: 1px solid @border-color;
      overflow-y: auto;

      .tab-nav {
        display: flex;
        border-bottom: 1px solid @border-color;

        .tab-btn {
          flex: 1;
          padding: @spacing-md;
          text-align: center;
          font-size: @font-size-sm;
          font-weight: 500;
          color: @gray-600;
          cursor: pointer;
          transition: all @transition-fast;
          border-bottom: 2px solid transparent;

          &:hover {
            color: @gray-900;
          }

          &.active {
            color: @primary-color;
            border-bottom-color: @primary-color;
          }
        }
      }

      .tab-content {
        padding: @spacing-lg;

        .property-group {
          margin-bottom: @spacing-xl;

          h3 {
            font-size: @font-size-base;
            font-weight: 600;
            color: @gray-900;
            margin-bottom: @spacing-md;
          }

          .property-item {
            margin-bottom: @spacing-md;

            label {
              display: block;
              font-size: @font-size-sm;
              font-weight: 500;
              color: @gray-700;
              margin-bottom: @spacing-xs;
            }

            input, select {
              width: 100%;
              padding: @spacing-sm;
              border: 1px solid @border-color;
              border-radius: @border-radius;
              font-size: @font-size-sm;
              transition: all @transition-fast;

              &:focus {
                outline: none;
                border-color: @primary-color;
                box-shadow: 0 0 0 3px fade(@primary-color, 10%);
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: @screen-xl) {
    .editor-content {
      flex-direction: column;

      .left-panel, .right-panel {
        width: 100%;
        height: auto;
        max-height: 200px;
      }

      .left-panel {
        order: 2;
        border-right: none;
        border-top: 1px solid @border-color;
      }

      .right-panel {
        order: 3;
        border-left: none;
        border-top: 1px solid @border-color;
      }
    }
  }
}